<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeatifIntredPlayer 演示</title>
    
    <!-- 播放器样式 -->
    <link rel="stylesheet" href="./dist/BeatifIntredPlayer.min.css">
    <style>
        /* 基础布局 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部导航 */
        .header {
            background: #20232a;
            color: white;
            padding: 1rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: relative;
            z-index: 100;
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            display: flex;
            gap: 1.5rem;
            padding: 1.5rem;
        }

        /* 侧边栏 */
        .sidebar {
            width: 260px;
            background: white;
            border-radius: 8px;
            padding: 1rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        /* 播放器容器 */
        .player-container {
            flex: 1;
            border-radius: 8px;
            padding: 1rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        /* 自定义控件 */
        .custom-controls {
            margin-top: 1rem;
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .control-btn {
            background: #00a1d6;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .control-btn:hover {
            background: #0087b3;
            transform: translateY(-1px);
        }

        /* 错误提示 */
        .error-message {
            color: #ff4c4f;
            background: #ffe3e6;
            padding: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
            display: none;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
                padding: 1rem;
            }

            .sidebar {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>BeatifIntredPlayer 演示</h1>
    </header>

    <main class="main-content">
        <aside class="sidebar">
            <h2>视频列表</h2>
            <ul style="margin-top: 1rem; list-style: none;">
                <li><button class="control-btn" onclick="changeVideo('mp4')">MP4 示例</button></li>
                <li><button class="control-btn" style="margin-top:0.5rem;" onclick="changeVideo('hls')">HLS 示例</button></li>
                <li><button class="control-btn" style="margin-top:0.5rem;" onclick="changeVideo('flv')">FLV 示例</button></li>
            </ul>
        </aside>

        <section class="player-container">
            <div id="video-player"></div>
            
            <div class="custom-controls">
                <button class="control-btn" onclick="togglePlay()">
                    <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z"/></svg>
                    播放/暂停
                </button>
                <button class="control-btn" onclick="toggleFullscreen()">
                    <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
                    全屏切换
                </button>
            </div>

            <div class="error-message" id="error-msg"></div>
        </section>
    </main>

    <!-- 依赖库 -->
    <script src="./dist/BeatifIntredPlayer.min.js"></script>
    
    <!-- 播放器实例 -->
    <script>
        let player = null;

        // 初始化播放器
        function initPlayer(url, type) {
            if (player) player.destroy();

            player = new BeatifIntredPlayer({
                container: document.getElementById('video-player'),
                src: url,
                theme: '#00a1d6',
                customControls: [
                    {
                        icon: '📊',
                        tooltip: '数据统计',
                        action: () => showMessage('统计信息加载中...')
                    }
                ]
            });
        }

        // 视频切换
        function changeVideo(type) {
            const videos = {
                mp4: 'http://foxcm.byusi.cn/static/uploads/videos/2ff6c153-fa20-46d3-830b-7af1a76b9400.mp4',
                hls: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
                flv: 'http://flv.bdplay.nodemedia.cn/live/bbb.flv'
            };

            try {
                document.getElementById('error-msg').style.display = 'none';
                initPlayer(videos[type], type);
            } catch (error) {
                showMessage(`视频切换失败: ${error.message}`);
            }
        }

        // 基础控制
        function togglePlay() {
            if (player.dp.video.paused) {
                player.play();
            } else {
                player.pause();
            }
        }

        function toggleFullscreen() {
            player.toggleFullscreen();
        }

        // 消息提示
        function showMessage(msg, isError = false) {
            const elem = document.getElementById('error-msg');
            elem.textContent = msg;
            elem.style.display = 'block';
            elem.style.background = isError ? '#ffe3e6' : '#e6f7ff';
            elem.style.color = isError ? '#ff4c4f' : '#1890ff';
        }

        // 初始化默认视频
        window.addEventListener('DOMContentLoaded', () => {
            initPlayer('http://foxcm.byusi.cn/static/uploads/videos/2ff6c153-fa20-46d3-830b-7af1a76b9400.mp4', 'mp4');
        });
    </script>
</body>
</html>